<template>
  <div class="product">
    <el-input class="search" v-model="searchValue" placeholder="商品名称（name）"></el-input>
    <el-button type="primary" @click="searchHandle">查询</el-button>
    <el-button type="success" @click="addHandle">新增</el-button>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column label="id" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="name" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="price" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column label="introduce" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.introduce }}</span>
        </template>
      </el-table-column>
      <el-table-column label="img_url" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.img_url }}</span>
        </template>
      </el-table-column>
      <el-table-column label="imgBigUrls" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.imgBigUrls }}</span>
        </template>
      </el-table-column>
      <el-table-column label="imgSmallUrls" width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.imgSmallUrls }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" @current-change="pageHandle" background layout="prev, pager, next" :total="tableDataAll.length">
    </el-pagination>
    <Edit ref="edit"/>
  </div>
</template>

<script>
import edit from "./edit.vue"
export default {
  name: "product",
  components: {
    Edit: edit
  },
  data() {
    return {
      responseData: [
      ],
      tableDataAll: [],
      tableData: [],
      searchValue: "",
    };
  }, // data
  methods: {
    searchHandle() {
      if(this.searchValue === "") {
        this.tableDataAll = this.responseData;
        this.tableData = this.tableDataAll.slice(0,10);
        return true;
      }
      this.tableDataAll = this.responseData.filter(item => {
        if(item.name.indexOf(this.searchValue ) > -1) {
          return true;
        }
        return false;
      })
      this.tableData = this.tableDataAll.slice(0,10);
    },  // searchHandle
    addHandle() {
      this.$refs.edit.editVisible = true;
    },  // addHandle
    handleEdit(index, row) {
      this.$refs.edit.editVisible = true;
      setTimeout(() => {  // 保证 edit 组件已被渲染完毕
        this.$refs.edit.render(row);
      }, 0);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleOpen() {},
    getProduct() {
      this.axios
        .get("/product/findAll", {
          // headers: {
          //   authorization: "123"
          // }
        })
        .then((response) => {
          this.responseData = response.data;
          this.tableDataAll = this.responseData;
          this.tableData = this.tableDataAll.slice(0,10);
        });
    }, // getProduct
    pageHandle(np) {
      np--;
      this.tableData = this.responseData.slice(np * 10, (np + 1) * 10);
    },
  },
  beforeMount() {
    this.getProduct();
  },
};
</script>

<style lang="scss" scoped>
.product {
  width: 100%;
  height: 100vh;
  float: left;
}
.pagination {
  display: flex;
  justify-content: center;
  padding: 30px 0 80px 0;
}
.search {
  padding: 0 0 50px 0;
  width: 300px;
}
</style>